<template>
    <div class="app">
        <h2>{{msg}}，学生姓名是 {{studentName}}</h2>
        <!-- 通过父组件给子组件传递函数类型的 props 实现：子给父传递数据 -->
        <School :getSchoolName="getSchoolName"></School>
        <!-- 通过父组件给子组件绑定一个自定义的事件实现：子给父传递数据 （第一种写法，使用 @ 或者 v-on）-->
        <!--<Student v-on:sendEvent="getStudentName"></Student>-->
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用 ref） -->
        <Student ref="student" @click.native="show"></Student>
    </div>
</template>

<script>
    import Student from './components/Student'
    import School from "./components/School";

    export default {
        name: "app",
        components: {School, Student},
        data() {
            return {
                msg: '你好啊',
                studentName: ''
            }
        },
        methods: {
            getSchoolName(name) {
                console.log('APP收到了学校的名称：', name);
            },
            getStudentName(name, ...params) {
                console.log('APP 收到了学生的名称', name, params);
                this.studentName = name;
            },
            show() {
                alert(123);
            }
        },

        // 生命周期的钩子函数中的 this 指向的是 mounted 方法所在的组件实例对象
        mounted() {
            // 将 sendEvent 事件挂载到组件 student 上，并且会回调 getStudentName
            this.$refs.student.$on('sendEvent', this.getStudentName);
            // 只触发一次事件，之后不再触发
            // this.$refs.student.$once('sendEvent', this.getStudentName);
        }
    }
</script>

<style scoped>
    .app {
        background-color: gray;
    }
</style>